<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #eaf2f5;
  border-right: 15px solid #eaf2f5;
  width: 1200px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #e5f1f5;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #d6e3e8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
table.{{$t|escape:'html'}}_category {
}
table.{{$t|escape:'html'}}_category td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #d6e3e8;
  font-family: Trebuchet MS;
  width: 150px;
  height: 30px;
}
table.{{$t|escape:'html'}}_category td.content {
  width: 400px;
}
.{{$t|escape:'html'}}_select {
  width: 280px;
  height: 23px;
  margin-left: 4px; 
}

.{{$t|escape:'html'}}_text {
  width: 275px;
  height: 20px;
  margin-left: 4px;
}
.{{$t|escape:'html'}}_textarea {
  width: 275px;
  height: 80px;
  margin-left: 4px;
}
.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
</style>
<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
  <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
  <table class="{{$t|escape:'html'}}_category">
    <tr>
      <td class="title">{{t escape='html'}}Parent{{/t}}</td>
      <td class="content"><select id="{{$t|escape:'html'}}_parent" class="{{$t|escape:'html'}}_select"></select></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="title">{{t escape='html'}}Name{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_name" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($category)}}{{$category->name|escape:html}}{{/if}}"></input></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _category = {{if isset($category)}}JSON.parse('{{$category|@json_encode|escape:'javascript'}}'){{else}}null{{/if}};

    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      var message, dup, tmp, elm, op;
      
      if (!_category) {
        _category = pz_ecom_category.instance()
      }
      
      message = JSON.parse('{{$msg|escape:javascript}}');
      elm = document.getElementById('{{$t|escape:javascript}}_parent');
      setParent(elm, message['m'], 0);
    }
    
    function setParent(select, node, level) {
      var op;
      if (level == 0) {
        op = new Option('{{t escape='javascript'}}Select...{{/t}}');
      } else {
        op = new Option(node.name);
      }
      op._obj = node;
      op.style.paddingLeft = level * 5 + 'px';
      select.options[select.options.length] = op;
      
      if (node.id == _category.parent_id) {
        select.selectedIndex = select.options.length - 1;
      }
      if (node.id == _category.id) {
        op.disabled = true;
      }
      
      for (var i = 0, il = node.c.length; i < il; i++) {
        setParent(select, node.c[i], level+1);
      }
    }
    
    function save() {
      var parent = document.getElementById('{{$t|escape:javascript}}_parent');
      _category.parent_id = parent.options[parent.selectedIndex]._obj.id;
      _category.name = document.getElementById('{{$t|escape:javascript}}_name').value;
      if (!_category.id) {
        _category.order = (parent.options[parent.selectedIndex]._obj.c.length == 0) ? 1 : parseFloat(parent.options[parent.selectedIndex]._obj.c[parent.options[parent.selectedIndex]._obj.c.length - 1].order, 10) + 1
      };
//      new RequestUtils()._write(JSON.stringify( [ {
//        n : 'pz_ecom_category',
//        a : [ _category ],
//        r : []
//      } ]), function(result, params) {
//        location.href = 'admin.php?path=ecommerce&t=categories';
//      }, {
//      });
      new RequestUtils()._custom('ezobj', JSON.stringify({
        tbl : 'pz_ecom_category',
        obj : _category
      }), function(result, params) {
        location.href = 'admin.php?path=ecommerce&t=categories';
      }, {
        php: 'custom.php'
      });
    }
  // -->
</script>